<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16">
        <div
          style="margin-top: 15px; margin-right: 25px"
          class="table-container"
        >
          <el-table
            :data="LabelList"
            v-loading="listLoading"
            style="width: 100%"
            height="480px"
            border
          >
            <el-table-column
              type="selection"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column label="标签ID" width="150" align="center">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="标签名" width="150" align="center">
              <template slot-scope="scope">
                <p
                  v-if="modifyLabelVisible == false || modifyId != scope.row.id"
                >
                  {{ scope.row.name }}
                </p>
                <el-input
                  v-if="modifyLabelVisible == true && modifyId == scope.row.id"
                  v-model="scope.row.name"
                  placeholder="scope.row.name"
                  @blur="handleModify(scope.row.id, scope.row.name)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="标签状态" width="150" align="center">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.status == 'BAN'"
                  >禁用</el-tag
                >
                <el-tag type="success" v-else-if="scope.row.status == 'NORMAL'"
                  >正常</el-tag
                >
                <el-tag v-else>其他</el-tag></template
              >
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="
                    modifyLabelVisible = true;
                    modifyId = scope.row.id;
                  "
                  size="mini"
                  type="success"
                  >修改</el-button
                >
                <el-button
                  v-if="scope.row.status == 'NORMAL'"
                  @click="handleBan(scope.row.id)"
                  size="mini"
                  type="warning"
                  >禁用</el-button
                >
                <el-button
                  v-if="scope.row.status == 'BAN'"
                  @click="handleCancleBan(scope.row.id)"
                  size="mini"
                  type="primary"
                  >解禁</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @current-change="getList"
            layout="prev, pager, next"
            :page-count="pageCunt"
            :current-page='pageNum'
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="8">
        <el-col :span="24">
          <div style="margin-top: 15px">
            <el-card
              style="width: 400px"
              class="filter-container"
              shadow="never"
            >
              <div>
                <span>筛选搜索</span>
              </div>

              <div style="margin-top: 15px">
                <el-form
                  :inline="true"
                  :model="searchLabelList"
                  size="small"
                  label-width="140px"
                >
                  <el-form-item label="标签名:">
                    <el-input
                      style="width: 203px"
                      placeholder="请输入标签名"
                      v-model="searchLabelList.name"
                      clearable
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="标签状态:">
                    <el-select
                      v-model="searchLabelList.status"
                      style="width: 203px"
                      placeholder="请选择标签状态"
                      clearable
                    >
                      <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>

              <div>
                <el-button
                  @click="handleResetSearch()"
                  type="info"
                  style="float: right"
                  size="small"
                  icon="el-icon-delete"
                  >重置</el-button
                >
                <el-button
                  @click="getList(1)"
                  style="float: right; margin-right: 15px; margin-bottom: 15px"
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  >查询</el-button
                >
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="margin-top: 15px">
            <el-card
              style="width: 400px"
              class="filter-container"
              shadow="never"
            >
              <div>
                <span>批量添加</span>
                <el-button
                  style="margin-left: 15px"
                  type="primary"
                  size="mini"
                  @click="addInput()"
                  icon="el-icon-circle-plus-outline"
                ></el-button>
              </div>
              <div style="margin-top: 15px">
                <el-form :inline="true" size="small" label-width="140px">
                  <div v-for="(item, index) in arrayLabelName" :key="item.id">
                    <el-form-item label="标签名:">
                      <el-input
                        style="width: 150px"
                        v-model="item.name"
                        placeholder="请输入标签名"
                        clearable
                      ></el-input>
                      <el-button
                        style="margin-left: 10px"
                        size="mini"
                        type="danger"
                        @click="deleteInput(item, index)"
                        icon="el-icon-remove-outline"
                      ></el-button>
                    </el-form-item>
                  </div>
                </el-form>
                <div>
                  <el-button
                    style="float: left; margin-right: 15px; margin-bottom: 15px"
                    @click="handleAddLabel()"
                    type="success"
                    size="small"
                    >添加</el-button
                  >
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "userManage",
  data() {
    return {
      searchLabelList: {
        name: "",
        status: "",
        pageNum: "1",
        pageSize: "5",
      },
      currentLabelList: {
        name: "",
        status: "",
        pageNum: "1",
        pageSize: "5",
      },
      pageNum:0,
      LabelList: [],
      statusOptions: [
        {
          value: "BAN",
          label: "禁用",
        },
        {
          value: "NORMAL",
          label: "正常",
        },
      ],
      arrayLabelName: [
        {
          id: "",
          name: "",
        },
      ],
      labelNames: [],
      dataNum: 0,
      modifyLabelVisible: false,
      modifyId: "",
      pageCunt: 1,
      listLoading: true,
    };
  },
  created() {
    this.getList(1);
  },
  methods: {
    getList(pageNum) {
      this.currentLabelList = this.searchLabelList
      this.pageNum = pageNum
      this.currentLabelList.pageNum = pageNum;
      this.listLoading = true;
      this.axios
        .get("/api/sys/label/list", {
          params: this.currentLabelList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.LabelList = response.data.value.data;
            // console.log('response.data.value.total',response.data.value.length);
            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    handleResetSearch() {
      this.searchLabelList = {
        name: "",
        status: "",
        pageNum: "1",
        pageSize: "5",
      };
    },
    handleSearchList() {
      this.pageNum = 1
      this.listLoading = true;
      this.axios
        .get("/api/sys/label/list", {
          params: this.searchLabelList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.LabelList = response.data.value.data;
            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // handleCurrentChange(val) {
    //   this.listLoading = true;
    //   this.currentLabelList.pageNum = val;
    //   this.axios
    //     .get("api/sys/label/list", {
    //       params: this.currentLabelList,
    //     })
    //     .then((response) => {
    //       if (response.data.code == "200") {
    //         this.LabelList = response.data.value.data;
    //       } else {
    //         this.$message.error(response.data.message);
    //       }
    //       this.listLoading = false;
    //     })
    //     .catch((error) => {
    //       this.$message.error("无法获取数据");
    //       this.listLoading = false;
    //     });
    // },
    handleModify(modifyId, modifyName) {
      this.$confirm("请再次确认是否修改该标签名")
        .then((_) => {
          this.axios
            .post(
              "api/sys/auth/label/update?id=" + modifyId + "&name=" + modifyName
            )
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.modifyLabelVisible = false;
                this.modifyId = "";
                this.getList(1);
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("修改失败");
            });
        })
        .catch((_) => {});
    },
    handleBan(banId) {
      this.$confirm("请再次确认是否禁用该标签")
        .then((_) => {
          this.axios
            .post("api/sys/auth/label/update?id=" + banId + "&status=" + "BAN")
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "禁用成功",
                  type: "success",
                });
                this.getList(1);
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("禁用失败");
            });
        })
        .catch((_) => {});
    },
    handleCancleBan(banId) {
      this.$confirm("请再次确认是否解除禁用该标签")
        .then((_) => {
          this.axios
            .post(
              "api/sys/auth/label/update?id=" + banId + "&status=" + "NORMAL"
            )
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "解除禁用成功",
                  type: "success",
                });
                this.getList(1);
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("解除禁用失败");
            });
        })
        .catch((_) => {});
    },
    deleteInput(item, index) {
      if (this.arrayLabelName.length <= 1) {
        //如果只有一个输入框则不可以删除
        return false;
      }
      this.arrayLabelName.splice(index, 1); //删除了数组中对应的数据也就将这个位置的输入框删除
    },
    addInput(item) {
      this.arrayLabelName.push(
        //增加就push进数组一个新值
        {
          id: this.dataNum++,
          name: "",
        }
      );
    },
    handleAddLabel() {
      // console.log(this.arrayLabelName);
      for (var key in this.arrayLabelName) {
        this.labelNames[key] = this.arrayLabelName[key].name;
      }
      // console.log(this.label);
      this.$confirm("请再次确认是否添加这些标签")
        .then((_) => {
          this.axios
            .post("/api/sys/auth/label/add", this.labelNames)
            .then((response) => {
              if (response.data.code == "200") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.getList(1);
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("添加失败");
            });
        })
        .catch((_) => {});
    },
  },
};
</script>
<style></style>